<template>
  <view class="container">
    <view class="input-area">
      <text>输入值: </text>
      <input type="text" v-model="title" style="color: red; border: 1px solid #ccc; padding: 8rpx;" />
    </view>

    <view class="input-area">
      <text>回传值: </text>
      <input type="text" :value="callBackValue" style="color: plum; border: 1px solid #ccc; padding: 8rpx;" />
    </view>
    <comA :intent="title" @sendToCompB="handleSendToCompB"></comA>

    <comB :fromCompA="compAData" @callBackFun="handleCallBack"></comB>
  </view>
</template>

<script>
import comA from '../../../components/compA.vue'
import comB from '../../../components/compB.vue'

export default {
  components: { comA, comB },
  data() {
    return {
      title: "", 
      callBackValue: "", 
      compAData: "" 
    };
  },
  methods: {
    handleSendToCompB(data) {
      this.compAData = data;
    },
    handleCallBack(data) {
      this.callBackValue = data;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #fff;
}
.input-area {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  gap: 10rpx;
}
</style>